<!--顶部导航栏tab-->
<template>
  <div class="navtabBox">
    <div class="content">
      <div class="tabs">
        <router-link v-for="(item,index) in data" :key="index" :to="item.path">
          <div :class="'tabBox '+(index==hover?'hover':'')" @click="changeTab(index)">
            <i :class="'fa '+item.logo"/>
            <span>&nbsp;{{item.name}}</span>
          </div>
        </router-link>
      </div>
      <div class="call_out">
          <el-input v-model='call_num' type="tel" maxlength="11" placeholder="请输入电话号码"/>
          <el-tooltip effect="dark" content="呼叫" placement="bottom">
            <i class="fa fa-phone"/>
          </el-tooltip>
      </div>
      <div class="info">
          <el-tooltip effect="dark" content="查看通话记录" placement="bottom">
            <i class="el-icon-tickets"/>
          </el-tooltip>
          <el-tooltip effect="dark" content="站内信" placement="bottom">
            <i class="el-icon-bell"/>
          </el-tooltip>
          <img src="@/assets/icon/favicon.png" alt="头像">
      </div>
    </div>
    <div class="space"/>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: []
      //导航栏数据，应有logo，name，path三个属性
    },
    index:{
      type:Number,
      default:0
      //指示导航栏序号
    }
  },
  data() {
    return {
      hover: 0,
      call_num:''
    };
  },
  methods:{
      changeTab(index){
          this.hover = index;
      }
  },
  created(){
    this.hover = this.index;
  }
};
</script>

<style lang='scss'>
.navtabBox {
  .content {
    height: 58px;
    padding-top: 9px;
    padding-left: 10px;
    position: fixed;
    left: 100px;
    top: 0;
    right: 6px;
    display: flex;
    background: #fff;
    .tabs {
      display: flex;
      flex: 3;
      .tabBox {
        padding: 10px 20px 17px;
        height: 20px;
        i {
          color: #e6e9f2;
        }
        span {
          color: #666;
        }
        :hover {
          i {
            color: #ffb173;
          }
        }
      }
      .hover {
        border-bottom: #ffb173 3px solid;
        i {
          color: #ffb173;
        }
      }
    }
    .call_out {
      flex: 1;
      padding: 8px 0 18px;
      display: flex;
      align-items: center;
      .el-input{
          width: 179px;
          input{
              height: 32px;
          }
          margin-right: 20px;
      }
      i{
            color: #666;
            font-size: 18px;
            cursor: pointer;
      }
      img{
          width: 38px;
          height: 38px;
      }
    }
    .info {
      flex: 1;
      padding: 8px 0 18px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      i{
          font-size: 18px;
      }
    }
  }
  .space {
    height: 67px;
    width: 100%;
  }
}
</style>
